<template>
  <!-- 用户订单列表 -->
  <layout title="订单" background="#fff">
    <tohome />
    <view style="padding: 0 30rpx; height: 90rpx; background: #ffffff">
      <u-tabs
        :list="list"
        :activeColor="'#4E95FC'"
        :inactiveColor="'#666666'"
        :barHeight="12"
        :barWidth="60"
        :barAutoWidth="true"
        :barStyle="{
          bottom: '8rpx',
          opacity: 0.7,
          background: 'linear-gradient(to right, #FFE6A3, #FFCB40)',
        }"
        :is-scroll="false"
        :current="current"
        @change="change"
      ></u-tabs>
    </view>
    <scroll-view
      scroll-y
      style="background: #f5f7f9"
      :style="`height:calc(${vuex_phoneLayout.safeAreaHeight}px - ${vuex_safeArea.top}px - 90rpx )`"
      @scrolltolower="tolower"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    >
      <view class="orderList" v-if="dataList.length">
        <view class="orderList-item" v-for="item in dataList">
          <view class="orderList-item_title" @tap="triggerToDetail(item)">
            <view class="orderList-item_title_left">
              {{ item.serviceType == 1 ? "取" : "送" }}件
            </view>
            <view class="orderList-item_title_right">
              <text v-if="item.statusName">{{ item.statusName }}</text>
              <text v-else-if="item.status === -1" style="color: #666"
                >已取消</text
              >
              <image
                :src="getImgSrc('/home/icon_right.png')"
                style="height: 30rpx; margin-left: 12rpx"
                mode="heightFix"
              ></image>
            </view>
          </view>
          <view class="orderList-item_content" @tap="triggerToDetail(item)">
            <view class="orderList-item_content_text">
              <view :class="item.serviceType == 1 ? 'siteWay' : 'myWay'">
                取
              </view>
              <view class="">
                {{
                  item.serviceType == 1 ? item.siteAddress : item.addrAddress
                }}
              </view>
              <view class="shuxian_bottom"></view>
            </view>
            <view class="orderList-item_content_text">
              <view class="shuxian_top"></view>
              <view :class="item.serviceType == 1 ? 'myWay' : 'siteWay'">
                送
              </view>
              <view class="">
                {{
                  item.serviceType == 1 ? item.addrAddress : item.siteAddress
                }}
              </view>
            </view>
          </view>
          <view class="orderList-item_bottom" v-if="item.status != -1">
            <view class="orderList-item_bottom_left">
              {{ item.finishTime ? item.finishTime : "" }}
            </view>
            <view class="orderList-item_bottom_right">
              <!-- 0.待支付 1.待接单 2.未取货 3.已取货 4.已送达 5.待评价 6完成 -->
              <view class="orderList-item_bottom_item" v-if="item.status == 0">
                <view
                  class="orderList_button"
                  @tap="cancelHandle(item.tradeNo)"
                >
                  取消订单
                </view>
                <view
                  class="orderList_button orderList_button_sub"
                  @tap="wxPrePay(item.tradeNo)"
                >
                  确认付款
                </view>
              </view>

              <view class="orderList-item_bottom_item" v-if="item.status === 1">
                <view
                  class="orderList_button"
                  @tap="cancelHandle(item.tradeNo)"
                >
                  取消订单
                </view>
                <view
                  class="orderList_button orderList_button_sub"
                  @tap="triggerToModifyAddr(item)"
                >
                  修改地址
                </view>
              </view>
							<view class="orderList-item_bottom_item" v-if="item.status === 2">
							  <view
							    class="orderList_button"
							    @tap="cancelHandle(item.tradeNo)"
							  >
							    取消订单
							  </view>
							</view>

              <view
                class="orderList-item_bottom_item"
                v-if="item.status === 3"
                @tap="triggerToDetail(item)"
              >
                <view class="orderList_button"> 看看到哪了 </view>
              </view>
              <view
                class="orderList-item_bottom_item"
                v-if="item.status === 4"
                @tap="triggerToDetail(item)"
              >
                <view
                  class="orderList_button orderList_button_sub"
                  @tap="confirmReceived(item)"
                >
                  确认完成
                </view>
              </view>

              <view
                class="orderList-item_bottom_item"
                v-if="item.status === 5"
                @tap="triggerToDetail(item)"
              >
                <view class="orderList_button orderList_button_sub">
                  去评价
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="empty-message">暂无数据</view>
      <view
        v-if="dataList.length"
        class="screen-bottomFill"
        style="opacity: 1; text-align: center"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
        {{ req.pageNum >= totalPage ? "已经到底了~" : "加载中···" }}
      </view>
    </scroll-view>
  </layout>
</template>
<script>
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "white",
        color: "black",
        iconText: "订单", //导航栏文字
      },
      triggered: false,
      _freshing: false,
      dataList: [],
      list: [
        {
          name: "全部",
        },
        {
          name: "待支付",
          count: 0
        },
        {
          name: "待接单",
          count: 0
        },
        {
          name: "进行中",
          count: 0
        },
        {
          name: "待评价",
          count: 0
        },
      ],
      reqStatusList: [
        //status查询入参 对应上面tab
        "",
        "APPLET_MY_ORDER_STATUS_UN_PAY",
        "APPLET_MY_ORDER_WAIT_RUNNER",
        "APPLET_MY_ORDER_STATUS_ING",
        "APPLET_MY_ORDER_STATUS_SORE",
      ],
      current: 0,
      req: {
        pageNum: 1,
        pageSize: 5,
        status: "",
      },
      totalPage: 999,
    };
  },
  onLoad(option) {
    this.current = option.index ? option.index : 0;
    this.req.status = this.reqStatusList[this.current];
    const _this = this;
    this.$bridge.registerHandler(
      "triggerToAfterPay",
      (data, responseCallback) => {
        responseCallback(data);
        if (_this.orderId) {
          uni.navigateTo({
            url: "/pages/sys/cuser/order-detail?orderId=" + _this.orderId,
          });
        }
      }
    );
  },
  onShow() {
    this.getData();
  },
  watch: {},
  methods: {
    confirmReceived() {},
    triggerToModifyAddr(item) {
      uni.navigateTo({
        url: `/pages/sys/cuser/address?orderId=${item.tradeNo}`,
      });
    },
    moreMes() {
      this.$u.toast("更多内容请下载APP体验~");
    },
    triggerToDetail(item) {
      uni.navigateTo({
        url: `/pages/sys/cuser/order-detail?orderId=${item.tradeNo}`,
      });
    },
    cancelHandle(tradeNo) {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否确认取消订单",
        success: function (res) {
          if (res.confirm) {
            // that
            let pa = {
              tradeNo: tradeNo,
            };
            that.$u.api.cuserOrderCancel(pa).then((res) => {
              if (res.code == "200") {
                that.$u.toast("订单取消成功");
                that.req.pageNum = 1;
                that.getData();
              } else {
                that.$u.toast(res.message || "订单取消失败" );
              }
            });
          }
        },
      });
      return false;
    },
    async wxPrePay(orderId) {
      this.orderId = orderId;
      if (!orderId) {
        uni.showToast({ title: "无效任务号", icon: "none" });
        return;
      }
      const res = await this.$u.api.appOrderPay({ orderId });
      if (!res || res.code !== 200) {
        uni.showToast({ title: res.message || "操作失败", icon: "none" });
        return;
      }
      this.$bridge.callHandler(
        "triggerToPay",
        JSON.stringify(res.data),
        (args) => {}
      );
    },
    change(index) {
      this.current = index;
      this.req.pageNum = 1;
      this.req.status = this.reqStatusList[this.current];
      this.getData();
    },
    wxPayment(e) {
      // 微信支付
      let that = this;
      uni.requestPayment({
        provider: "wxpay",
        timeStamp: JSON.stringify(e.timeStamp),
        nonceStr: e.nonceStr,
        package: e.packages,
        signType: e.signType,
        paySign: e.paySign,

        success: function (res) {
          console.log("success:");
          console.log("success:" + JSON.stringify(res));
          setTimeout(() => {
            that.$u.toast("支付成功");
            that.getData();
          }, 300);
        },
        fail: function (err) {
          console.log("err:" + JSON.stringify(err));
          that.$u.toast("支付已取消");
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/sys/home/index",
            });
          }, 300);
        },
      });
    },
    gotoPaySuccess(e) {
      uni.navigateTo({
        url: "/pages/sys/cuser/paySuccess?payPrice=" + e.price,
      });
    },
    getData() {
      this.$u.api.getOrderCount().then(res => {
        (res.data ||[]).forEach((count,idx) => {
          this.list[idx+1].count = count
        })
      })
      this.$u.api.cuserOrderList(this.req).then((res) => {
        if (res.code == "200") {
          if (this.req.pageNum > 1) {
            this.dataList.push(...res.data.list);
          } else {
            this.dataList = res.data.list;
          }
          this.totalPage = res.data.totalPage;
        } else {
          this.$u.toast(res.message);
        }
      });
    },
    tolower() {
      let that = this;
      setTimeout(() => {
        that.moreData();
      }, 1000);
    },
    moreData() {
      this.req.pageNum += 1;
      this.getData();
    },
    onRefresh() {
      //下拉刷新
      if (this._freshing) return;
      this._freshing = true;
      this.triggered = true;
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
        this.req.pageNum = 1;
        this.getData();
      }, 1000);
    },
    onRestore() {
      this.triggered = "restore"; // 需要重置
      console.log("onRestore");
    },
    onAbort() {
      console.log("onAbort");
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";
.empty-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 50vh;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4b4b4b;
  line-height: 36rpx;
}
.orderList {
  padding: 30rpx;
  .orderList-item {
    background: #ffffff;
    box-shadow: 15px 26px 42px 8px #eceef0;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
  }
  .orderList-item_title {
    padding: 35rpx 18rpx 35rpx 25rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .orderList-item_title_left {
    font-size: 34rpx;
    color: #282828;
    font-weight: 800;
  }
  .orderList-item_title_right {
    font-size: 28rpx;
    color: #fc801c;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .orderList-item_content {
    padding-bottom: 35rpx;
    border-bottom: 1rpx solid #eaeaea;
  }
  .orderList-item_content_text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 17rpx 24rpx;
    color: #333333;
    font-size: 28rpx;
    position: relative;
    z-index: 2;
    overflow: hidden;
    .shuxian_bottom {
      position: absolute;
      height: 50%;
      width: 1rpx;
      border-right: 1px dashed #cccccc;
      bottom: 0;
      left: 44rpx;
    }

    .shuxian_top {
      position: absolute;
      height: 50%;
      width: 1rpx;
      border-right: 1px dashed #cccccc;
      top: 0;
      left: 44rpx;
    }
    .myWay {
      width: 40rpx;
      height: 40rpx;
      background: #4e95fc;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #ffffff;
      line-height: 40rpx;
      text-align: center;
      margin-right: 16rpx;
      flex: 0 0 40rpx;
      position: relative;
      z-index: 2;
    }
    .siteWay {
      width: 40rpx;
      height: 40rpx;
      background: #ffca3b;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #ffffff;
      line-height: 40rpx;
      text-align: center;
      margin-right: 16rpx;
      flex: 0 0 40rpx;
      position: relative;
      z-index: 2;
    }
  }
  .orderList-item_bottom {
    height: 108rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .orderList-item_bottom_item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .orderList_button {
      border-radius: 32rpx;
      border: 1rpx #cccccc solid;
      font-size: 30rpx;
      color: #4b4b4b;
      padding: 10rpx 30rpx;
      margin-left: 20rpx;
      margin-bottom: 2rpx;
      margin-top: 2rpx;
    }
    .orderList_button_sub {
      border: 1rpx #4e95fc solid;
      color: #4e95fc;
    }
  }
}
</style>
